<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['技术管理', '工艺路线']" currentMenu="工艺详情"> </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">工艺编号</p>
          <p class="secondary-text">{{ detailInfo.craftCode || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">工艺名称</p>
          <p class="secondary-text">{{ detailInfo.craftName || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">物料</p>
          <p class="secondary-text">{{ detailInfo.goodsName || '-' }}</p>
        </div>
      </div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">规格</p>
          <p class="secondary-text">{{ detailInfo.spec || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">基本单位</p>
          <p class="secondary-text">{{ detailInfo.basicUnitText || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">物料类型</p>
          <p class="secondary-text">{{ detailInfo.typeText || '-' }}</p>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="工艺工序" :bordered="false" style="margin-top: 12px">
        <a-table
          row-key="id"
          :columns="columns"
          :data-source="detailInfo.messProductCraftProcessRelVo"
          :pagination="false"
          :scroll="{ x: '100%', y: 600 }"
        >
        </a-table>
        <a-pagination
          :total="detailInfo.messProductCraftProcessRelVo.length"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
          class="pagination"
        />
      </a-card>
      <a-card title="其他信息" :bordered="false" style="margin-top: 12px">
        <div class="item-wrap">
          <div class="detail-item" style="width:100%">
            <p class="subtitle">备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap" style="margin-top:40px">
          <div style="width: 100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { productCraftProcessRelById } from '@/api/goodsManagement'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      jkeForm: {
        title: '工艺详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      current: 1,
      total: 100,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],

      detailInfo: {
        teamGroupUserList: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            time: '2016-09-21 08:50:08',
          },
          {
            key: '4',
            name: 'Jim Red',
            age: 32,
            address: 'London No. 2 Lake Park',
            time: '2016-09-21 08:50:08',
          },
        ],
      },
      mainWidth: 0,
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  computed: {
    columns() {
      // let { typeFilter } = this
      // typeFilter = typeFilter || {}
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      const columns = [
        {
          title: '序号',
          width: '8%',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '工序',
          dataIndex: 'processName',
          key: 'processName',
          ellipsis: true,
        },
        {
          title: '报工单位',
          dataIndex: 'processWorkUnitText',
          key: 'processWorkUnitText',
          ellipsis: true,
        },
        {
          title: '报工配比',
          dataIndex: 'processWorkRate',
          key: 'processWorkRate',
          ellipsis: true,
        },
        {
          title: '超量报工（%）',
          dataIndex: 'excessWorkRate',
          key: 'excessWorkRate',
          ellipsis: true,
        },
        {
          title: '工序要求',
          dataIndex: 'processRequire',
          key: 'processRequire',
          ellipsis: true,
        },
      ]
      return columns
    },
  },
  methods: {
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      productCraftProcessRelById({ id: id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
        }
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      console.log(current, pageSize, '123123')
      // this.getList(current)
      this.current = current
    },
    onShowSizeChange(current, pageSize) {
      // this.getList(current, pageSize)
      this.pageSize = pageSize
      this.current = current
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.cards-box {
  height: calc(100vh - 285px);
  overflow-y: scroll;
}
.pagination {
  .flex(flex-end, center);
  padding: 8px;
}
</style>
